<template>
  <el-dialog
      v-el-drag-dialog="{drag: true, full: true, resize: true}"
      title="添加小组"
      :width="'400px'"
      :close-on-click-modal="false"
      :visible.sync="md.state"
      @close="closeMd"
      v-if="md.state"
  >
    <el-form :model="fm.ps" :ref="fm.fname" :label-width="'100px'">

      <el-form-item
          label="选择小队"
          prop="groupName"
          :rules="[
            { required: true, message: '请选择小队名称', trigger: 'blur' },
          ]"
      >
        <el-select
            clearable
            v-model="fm.ps.teamId"
            placeholder="请选择小队名称"
            style="width: 100%">
          <el-option
              v-for="item in groupOptions"
              :key="item.id"
              :label="item.teamName"
              :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item
          label="小组名称"
          prop="groupName"
          :rules="[
            { required: true, message: '请输入小组名称', trigger: 'blur' },
            { min: 1, max: 5, message: '小组名称长度最多为5位字符', trigger: 'blur' }
          ]"
      >
        <el-input v-model="fm.ps.groupName" placeholder="请输入小组名称"></el-input>
      </el-form-item>

      <el-form-item
          label="负责人"
          prop="leadUname"
          :rules="[
            { required: true, message: '请选择负责人', trigger: 'blur' }
          ]">
        <el-select
            filterable
            remote
            clearable
            v-model="fm.ps.leadUname"
            :remote-method="remoteMethod"
            placeholder="快速搜索负责人"
            :loading="loading"
            value-key="uname"
            @change="handleChange"
            style="width: 100%">
          <el-option
              v-for="item in employeesOptions"
              :key="item.id"
              :label="item.realName"
              :value="item">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit" :disabled="fm.sb.load">{{ fm.sb.text }}</el-button>
        <el-button @click="closeMd">关闭</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script>
import elDragDialog from '@/directive/el-drag-dialog';
import {addGroup, getGroupAllDict} from '@/api/services/logistics.service';
import {getStaffList} from "@/api/services/personMan.service";

export default {
  name: 'AddGroup',
  directives: {elDragDialog},
  props: ['state'],
  data() {
    return {
      md: {state: this.state},
      fm: {
        fname: 'addGroupFm',
        sb: {load: false, text: '立即添加'},
        ps: {
          groupName: '', // 小组名称
          leadUname: '',// 组长uname
          teamId: '', // 小队id
          uname: ''
        }
      },
      loading: false,
      groupOptions: [],
      employeesOptions: []
    }
  },
  async mounted() {
    this._getGroupAllDict()
    this.employeesOptions = await this._getStaffList()
  },
  methods: {
    async _getGroupAllDict() {
      const {data} = await getGroupAllDict()
      this.groupOptions = data
    },
    /* 关闭弹框 */
    closeMd() {
      this.$emit('getMdState', false);
    },
    async _getStaffList(find = '') {
      let params = {page: 1, rows: 20, find}
      let {data} = await getStaffList(params)
      return data.map(item => item.baseUserId)
    },
    handleChange(row) {
      this.fm.ps.leadUname = row.realName
      this.fm.ps.uname = row.uname
    },
    // 搜索
    async remoteMethod(query) {
      if (!query) {
        this.employeesOptions = []
        return
      }
      try {
        this.loading = true
        this.employeesOptions = await this._getStaffList(query)
        this.loading = false
      } catch {
        this.loading = false
        this.employeesOptions = []
      }
    },
    /**
     * 提交表单
     */
    onSubmit() {
      this.$refs[this.fm.fname].validate((valid) => {
        if (!valid) {
          return false;
        } else {
          const {groupName, uname, teamId} = this.fm.ps
          let params = {groupName, leadUname:uname, teamId}
          this.fm.sb.load = true;                              // 添加按钮禁用效果
          let loading = this.U.qloading('提交中，请稍后...');   // 添加遮
          addGroup(params).then(res => {
            this.fm.sb.load = false;                            // 取消按钮禁用效果
            this.U.qclose(loading);                             // 关闭遮罩
            if (!res || res.code !== 1) {
              this.U.qerror(res.msg);
            } else {
              this.U.qsuccess(res.msg);
              this.closeMd();
              // 调用父组件方法-重新加载数据
              this.$emit('reloadDg');
            }
          }).catch(() => {
            this.U.qclose(loading);
          })
        }
      });
    },

  },
}
</script>